---

AULA01 - Introdução a JS | Tipos de Dados

---

AGENDA

• Apresentação Javascript
• Comentários, Sintaxe e palavras reservadas
• Tipos de Dados
• Exibindo no console
• Primeiro programa
• Referências
• Perguntas

1. Apresentação Javascript

1.1. Javascript (JS)

• A linguagem de marcação HTML destina-se a estruturar uma página web.
• A folha de estilo CSS destina-se a formatar o conteúdo das páginas aplicando estilos. A versão anterior ao HTML5, não possuía funcionalidades para adicionar interatividade avançada às páginas.

• Javascript: foi criada pela Netscape em parceria com a Sun Microsystems, com finalidade de fornecer esta interatividade.
  • Primeiro nome foi Mocha.
  • Criador: Brendan Eich, nascido em 1961, nos EUA.

 * Em 1995: foi lançada a **primeira versão -- Livescript**, e em dezembro do mesmo ano, mudou-se para **Javascript 1.0**.  
 * Em 1996: foi lançada juntamente no navegador Netscape 2.0.  
 * Foi desenvolvida para rodar no lado do cliente, isto é, a interpretação e o funcionamento dependem de funcionalidades hospedadas no navegador do usuário.  

• Em 2009, a Oracle comprou a Sun Microsystems. Logo, passou a ser dona da marca Javascript. Informações do registro, consulte Trademarks.
• Atualmente, é a linguagem mais usada no mundo, por estar presente na maioria dos projetos Web.

• Curiosidade: a linguagem Javascript não possui logo. Os logos que são apresentados na web, não são oficiais.

1.2. ECMA - EUROPEAN COMPUTER MANUFACTURES ASSOCIATION

• Em 1996: Para que houvesse a evolução da linguagem e também, conseguissem manter um padrão, seus criadores se associaram ao ECMA International (Associação Europeia de Fabricantes de Computadores), e passaram a seguir alguns determinados padrões e normativas.

• O nome Javascript já havia sido patenteado pela SUN Microsystems (atual Oracle).

• Novo nome foi necessário: junção das palavras ECMA e Javascript —> ECMAScript.

• E como o nome Javascript já era famoso, a lingugaem continuou a ser chamada assim.

• Especificação: ECMAScript está no registro ECMA-262.

  • Em 2017: ECMAScript 2017, 8a. edição (ES8), lançado em junho de 2017.
  • Em 2018: ECMAScript 2018, 9a. edição (ES9), lançado em junho de 2018.
  • ...
  • Em 2022: ECMASCript 2022, lançado em junho de 2022.

1.3. Links interessantes:

• Documentação:
  • Documentação do Mozilla para o uso do Javascript, consulte MDN Web Docs.

• Versão atual ECMAScript | Javascript:

  • Em 2023: ECMASCript 2023,será lançado em junho de 2023.

• Para aprofundamento, consulte o livro Eloquent Javascript - 3a. Edição.

• Série You don't Know JS.

1.4. Como executar o JS

1.4.1. Via NodeJS

• Texto extraído de Introduction to NodeJS.

  • De acordo com NodeJS é ambiente de tempo de execução JavaScript de código aberto e plataforma cruzada.
  • O NodeJS executa o mecanismo V8 JavaScript, o núcleo do Google Chrome, fora do navegador. Isso permite que o NodeJS tenha um ótimo desempenho.
  • O NodeJS tem uma vantagem única porque milhões de desenvolvedores de front-end que escrevem JavaScript para o navegador agora são capazes de escrever o código do lado do servidor além do código do lado do cliente, sem a necessidade de aprender uma linguagem completamente diferente.
  • Um aplicativo NodeJS é executado em um único processo, sem criar um novo thread para cada solicitação.
  • Quando o NodeJS executa uma operação de entrada e saída (I/O), como ler da rede, acessar um banco de dados ou o sistema de arquivos, em vez de bloquear o thread e desperdiçar a espera dos ciclos de CPU, o NodeJS retomará as operações quando a resposta voltar. Isso permite que o NodeJS lide com milhares de conexões simultâneas com um único servidor sem introduzir o fardo de gerenciar a simultaneidade de threads, que pode ser uma fonte significativa de bugs.
  • NodeJS é uma plataforma de baixo nível. Para tornar as coisas mais fáceis e empolgantes para os desenvolvedores, milhares de bibliotecas foram construídas em NodeJS pela comunidade, tal como:
    • Expresso,
    • Meteor,
    • NextJS,
    • Strapi etc.

Para executar:

• Instalar o node a partir do site nodejs.org.
• Abrir o terminal ou prompt do windows para executar interativamente.
• Criar um arquivo com extensão .js e executar a instrução node arquivo.js.

1.4.2. Diretamente via console do navegador.

• Acione o botão direto, inspecionar elementos e selecione Console.

Fonte: Autoria própria

1.4.3. Via arquivo de script com extensão .js

• A inserção do Javascript em uma página web pode ser feita de duas maneiras:

  • Uma diretamente no código de extensão .html, seja dentro da tag < head > ou da tag < body >.
  • Criando um arquivo de extensão .js e acionando a partir do html.

• Sintaxe:

Script incorporado no html.

<!-- Script inserido no head ou no body -->
<script>
    .... inserir seu código JS aqui ...
</script>

Script externo ao html.

<!-- src deve ser preenchido com o caminho do script -->
<script src="..."></script>

• Com saída de dados via instrução console.log() para ser exibida no console do navegador.

<!-- Arquivo index.html -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="estilo.css" />
    <title>Static Template</title>
  </head>
  <body>
    <script src="script.js"></script>
  </body>
</html>

// Arquivo script.js 
console.log("Ana Paula Müller Giancoli");

1.4.3.1. Método innerHTML e textContent

• Exibindo conteúdo no seu HTML a partir do javascript:
  • Utilizando o método .innerHTML.
  • Utilizando o método .textContent.

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <title>Exemplo Javascript</title>
</head>
<body>
<h1> Informações Pessoais </h1>
<div id="id1">
  <p>Meu nome é</p>
  <p>Utilizando textContent: <span id="texto1"></span></p>
  <p>Utilizando innerHTML: <span id="texto2"></span></p>
</div>
<script>
  let c = document.getElementById("texto1");
  let d = document.getElementById("texto2");
  let a = prompt("Nome: ");
  c.textContent = a;
  d.innerHTML = a;
</script>
</body>
</html>

Fonte: Autoria própria		Fonte: Autoria própria

• Observações:

  • Para aprofundamento do assunto, consulte Javascript.info.

  • O script trava o processamento da página, quando inserido dentro da tag < head > até que seja totalmente carregado. Imagine um script que demore um pouco mais para ser executado ou que exija alguma interação do usuário como uma confirmação.

  • Para resolver este problema, utiliza-se a chamadas dos scripts dentro da tag < body >, logo ao fim do mesmo.
  • Utilize scripts no < head > quando for essencial para o carregamento da página.
  • Os scripts do < body > podem ser síncronos ou assíncronos:
    • Síncronos: o navegador aguarda a conclusão do script para terminar o carregamento da página.
    • Assíncronos: o navegador dispara a chamada do script e não aguarda sua conclusão para terminar o carregamento da página. Para usar scripts assíncronos, use a sintaxe:
    • Nos sites modernos, os scripts geralmente são "mais pesados" que o HTML: o tamanho do download é maior e o tempo de processamento também é maior.
  • Quando o navegador inicia o carregamento do HTML e se depara com um script, ele não continua a criar o DOM. Ele interrompe a criação e executa o script independente se é um incorporado ou externo ao html. Assim que é concluído a excução do script, o navegador continua a criação do restante do DOM.
  • Ao inserirmos scripts ao final do < body > minimizamos os impactos do carregamento das páginas.

1.4.4. Atributos dos scripts

• Consulte Javscript.info.

1.4.4.1. Atributo defer

• O atributo defer indica ao navegador que poderá continuar trabalhando com a página, carregando o script "em segundo plano" e, em seguida, executar o script quando concluir o carregamento.

• Sintaxe:

<script defer src="..."></script>

• Observações:
  • Os scripts defer nunca bloqueiam a página.
  • Sempre são executados quando o DOM está pronto, mas antes do evento para carregamento dos conteúdos do DOM (DOMContentLoaded).
  • Este atributo funciona somente com scripts externos.

1.4.4.2. Atributo async

• O atributo async indica que um script é completamente independente:
• O conteúdo das páginas são processados e exibidos, independente da execução do script.

• O evento de carregamento dos conteúdos do DOM (DOMContentLoaded) e scripts assíncronos são independentes um do outro:

  • o DOMContentLoaded pode ocorrer antes de um script assíncrono (se um script assíncrono terminar de carregar após a conclusão da página).
  • ou após um script assíncrono (se um script assíncrono for curto ou estiver no cache HTTP).

• Observações:

  • Existindo diversos scripts async, os mesmos serão executados em qualquer ordem, o que dependerá de seu tamanho.
  • Os scripts async não bloqueiam os conteúdos da página, logo o DOM é carregado, independente da execução antes ou depois do evento DOMContentLoaded.
  • São totalmente independentes.

---

2. Comentários, Sintaxe e Palavras reservadas

2.1. Comentários de linha

• Um comentário em um programa de computador é um texto destinado apenas ao leitor humano.
• É completamente ignorado pelo interpretador.
• Utilizamos o símbolo //, no início da linha para indicar um comentário, assim, o resto da linha é ignorado.

2.2. Comentários de blocos

• Comentários em diversas linhas, poderemos utilizar a barra de divisão, seguida de um asterisco no início do comentário, e ao finalizar, inserir, mais um asterisco e uma barra de divisão.
• Utilizamos o símbolo /*, no início da primeira linha para indicar um comentário e no final do bloco,*/.

2.3. Sintaxe

• Em Javascript, a indentação também é importante para facilitar a leitura do código.
• Cada linha é finalizada com um ponto e vírgula ;.
• Os blocos de instruções são delimitados pela chaves { ... }.
• Os blocos são uma ou mais instruções que devem ser executadas uma após a outra, de cima para baixo da esquerda para a direita.

2.4. Palavras reservadas

• As palavras reservadas não podem ser utilizadas para nomear elementos.

• Exemplo:

  • as
  • get
  • for
  • var
  • async
  • typeof
  • new
  • let
  • true

• Em javascript, o uso de ponto e vírgula ; é para separar as instruções. É importante separar uma instrução final do início da próxima. Poderá ser omitido, caso as instruções sejam escritas em linhas distintas. Caso contrário, é obrigatório.

// Instruções em linhas distintas
a = 3; // poderá ser omitida
b = 4;  

// Instruções na mesma linha
c = 10;  d = 20;  // não poderá ser omitida, passa a ser obrigatória

---

3. Tipos de Dados

• Para aprofundamento, consulte Javascript.info.
• Um valor pode ser qualquer informação, seja:
  • uma letra
  • um número
  • um vídeo
  • uma música que será manipulado pelo programa seguindo as instruções passadas.
• Os valores são classificados em diferentes tipos de dados.
• Para identificarmos o tipo de dado de um determinado valor, utilizamos o seguinte comando typeof no console do navegador (F12).

3.1. Tipos de valores:

• number: números inteiros, flutuantes.
• string: conjunto de caracteres (strings).
• boolean: armazenam os valores true, false.
• null: não possui valores. Null não é uma "referência a um objeto inexistente" ou um "ponteiro nulo", como em outras linguagens.
• undefined: variável declarada sem associação de valor, logo será undefined. Valor não atribuído.
• symbol: um valor único que não é igual a nenhum outro valor.
• bigInt: o tipo foi adicionado recentemente ao idioma para representar números inteiros de comprimento arbitrário.

3.1.1. Método typeof para identificação do tipo de dado

typeof "Ana Paula"
"string"


typeof 70
"number"


typeof 1.88           
"number"


typeof "a"          
"string"


typeof true
"boolean"

// Não é muito utilizado.
typeof undefined       
"undefined"

// Utilizado para iniciar e redefinir um valor posteriormente
let corSelecionada = null;
// Posteriormente a cor é modificada
typeof(null)           
"object"

typeof Symbol("id");
"symbol"

typeof(alert)
"function"

3.2. Variáveis e Constantes

• Para aprofundamento, consulte Javascript.info.
• É um espaço de memória que reservamos para armazenar valores temporários que estão sendo processados ou manipulados.
• Seu valor poderá ser alterado a qualquer momento.
• O nome da variável -- referência, é como iremos nos referir a um determinado espaço de memória.

3.2.1. Regras para criação de variáveis

• As variáveis são como nomes simbólicos para os valores em sua aplicação.
• O nome das variáveis, chamados de identificadores, obedecem determinadas regras.
• Os identificadores são utilizados para nomear constantes, variáveis, propriedades, funções, classes, labels e para certos loops em javascript.
• Os identificadores podem começar com underline, caracteres e cifrão, seguidos por números. Porém, nunca começar com números.
• Não é permitido o nome de variáveis utilizando as palavras reservadas.
• São `case sensitiv``.
• Para a definição de nomes de variáveis utilizaremos o camelCase.
  • Significado: "CamelCase é a denominação em inglês para a prática de escrever as palavras compostas ou frases, onde cada palavra é iniciada com maiúsculas e unidas sem espaços. É um padrão largamente utilizado em diversas linguagens de programação, como Java, C#, Ruby, PHP e Python, principalmente nas definições de classes e objetos."
• Existem 3 tipos de declarações em Javascript:
  • var: declara uma variável e opcionalmente, um valor. (Praticamente não é mais usado!)
  • let: declara uma variável local de escopo do bloco, opcionalmente, inicializando-a com um valor.
  • const: declara uma constante apenas de leitura. É imutável.
• As declarações podem ser:
  • Recomendável o uso de uma linha por variável para tornar o código legível.

/* não recomendável */
let nome = "Ana", sobrenome = "Giancoli";

/* ou */
let nome = "Ana", 
    sobrenome = "Giancoli";

/* ou */
let nome = "Ana";
let sobrenome = "Giancoli";

3.2.2. Possíveis erros de declaração de variáveis

• Variável declarada usando a declaração var ou let sem atribuição de valor —> undefined.

let a;

Fonte: Autoria própria

• Tentativa de acessar uma variável não declarada —> ReferenceError.

d + 8;    // a variável d não foi declarada

Fonte: Autoria própria

• Tentativa de somar um texto —> NaN

Fonte: Autoria própria

• Poderá usar undefined para determinar se uma variável tem um valor. Como por exemplo:

if (input === undefined) {
...
}

3.2.3. Constantes

• Utilize a palavra const antes do nome da constante.
• Não pode alterar seu valor por meio de atribuição, ou ser declarada novamente.
• Existe uma prática generalizada de usar constantes como aliases para valores difíceis de lembrar que são conhecidos antes da execução. Essas constantes são nomeadas usando letras maiúsculas e sublinhados.
• Deve ser inicializada com um valor. Como por exemplo:

const x = 10;   
const COLOR_RED = #f00;

3.3. Escopo de variável

• Quando você declara uma variável fora de qualquer função, é chamada de variável global, porque está disponível para qualquer outro código no documento atual.
• Quando você declara uma variável dentro de uma função, é chamada de variável local, pois está disponível somente dentro dessa função.
• Javascript antes do ECMAScript 6 não possuía escopo de declaração de bloco pelo contrário, uma variável declarada dentro de um bloco de uma função é uma variável local (ou contexto global) do bloco que está inserido a função.
• Exemplos:

if (true) {
    var x = 5;
}
console.log(x);


if (true) {
    let y = 10;
}
console.log(y);

Saída:

var x = 5;		let y = 10;
Fonte: Autoria própria		Fonte: Autoria própria

---

4. Exibindo no console

• Por meio do uso de console.log(conteúdo) é possível visualizar o resultado do comando no navegador.
• Onde texto poderá ser variável, string, objeto, erros etc.
• Podemos exibir os dados no console, utilizando a saída formatada.

String de substituição	Descrição
%o	Exibe um link para o objeto javascript. Ao selecionar o link, abre um inspetor.
%d ou %i	Exibe um número inteiro. A formatação ainda não possui suporte.
%s	Exibe um string.
%f	Exibe um número flutuante. A formatação ainda não possui suporte.

Exemplos

/* Exemplo1 */
let nome = "Ana";
let ano = 2008;
console.log("A profa. %s iniciou no IFSP no ano de %d.", nome, ano);

Exemplo 1
Fonte: Autoria própria

/* Exemplo2 */
let nome = "Ana";
let ano = 2008;
aluguel = 100.94;
console.log("A profa. %s iniciou no IFSP no ano de %d.", nome, ano);
console.log("O aluguel mensal do estacionamento custa em torno de %f.", aluguel);

Exemplo 2
Fonte: Autoria própria

/* Exemplo3 */
let user = new Object();
user.first = "Ana";
user.last = "Giancoli";
user.age = 10.28;
console.log("Olá, %s %s! Seja bem vinda!", user.first, user.last);
console.log("%s tem %i anos!", user.first, user.age);
console.log("%s tem %f anos!", user.first, user.age);

Exemplo 3
Fonte: Autoria própria

/* Exemplo4 */
let url = "http://bra.ifsp.edu.br";
let nome = "IFSP_BRA";
console.log("O site do %s é %o .", nome, url);

Exemplo 4
Fonte: Autoria própria

Para maiores informações sobre o uso do console:

• Consulte Basques, Kayce - Console API Reference.

---

5. Primeiro Programa

• Para exibir mensagens no console, utilize a sintaxe indicada abaixo.

console.log("Hello World!!");

Primeiro Programa
Fonte: Autoria própria

---

---

Referências

• Esta aula foi elaborada a partir do conteúdo disponibilizado em cada um dos links indicados no próprio texto.
• Basques, Kayce - Console API Reference.
• Javascript.info.

---

---

ADS - HTML5, CSS3, JS.
Modelo e formato elaborado pela profa. Ana Paula Müller Giancoli - BSD 2-Clause License. - Julho.2022.

</div> </div>